<!-- 要求使用LayUI输出User -->

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
	</head>

	<body>
		
	
		<div class="demoTable">
			搜索ID：
			<div class="layui-inline">
				<input class="layui-input" name="id" id="demoReload" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="reload">搜索</button>
		</div>

		<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

		<script type="text/javascript" src="./layui/layui.js">		</script>
		<script>
			layui.use('table', function() {
				var table = layui.table;
				
				//方法级渲染
				table.render({
					
                    elem: '#LAY_table_user'
                    ,url: 'http://localhost:8080/chapter14/testuser/1234'
                    ,page:{				//分页设置
        					limit:1,		//默认每一页显示数量
        					limits:[5,10,20,30,40,50]		//可选择每页显示的数量
        			}
            		,cellMinWidth: 120//全局定义常规单元格的最小宽度，layui 2.2.1 新增                
                    ,cols: [
                        [ {
                            field: 'username',
                            title: '姓名',
                            width: 80,
                            sort: true
                           
                        }, {
                            field: 'password',
                            title: '密码',
                            width: 80,
                            sort: true
                        }]
                    ],
                    id: 'testReload',
                    height: 500,

                });


				var $ = layui.$,
					active = {
						reload: function() {
							var demoReload = $('#demoReload');

							//执行重载
							table.reload('testReload', {
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									key: {
										id: demoReload.val()
									}
								}
							});
						}
					};

				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>

	</body>

</html>


